<template>

  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template #filter-content>
      <el-button :loading="loading" type="danger" size="small" icon="el-icon-caret-right" @click="toFlow()">顺序批阅</el-button>
    </template>

    <template #data-columns>

      <el-table-column
        label="试卷ID"
        prop="paperId"
        show-overflow-tooltip
      />

      <el-table-column
        label="考生信息"
        prop="realName"
        align="center"/>

      <el-table-column
        label="指派时间"
        align="center"
        prop="createTime"
        width="180px"
      />

      <el-table-column
        label="阅卷状态"
        prop="reviewState_dictText"
        align="center"
      />

      <el-table-column
        label="协作状态"
        align="center"
      >
        <template v-slot="scope">
          <div v-if="scope.row.lockBy" style="color: #ff3333">已锁定（{{ scope.row.lockBy_dictText }}）</div>
          <div v-else style="color: #1aac1a">未锁定</div>
        </template>

      </el-table-column>


      <el-table-column
        label="批阅时间"
        prop="reviewTime"
        align="center"
        width="180px"
      />

      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        width="150px"
      >
        <template v-slot="{ row }">

          <el-link icon="el-icon-view" type="primary" @click="toDetail(row.paperId)">批阅/查看</el-link>

        </template>

      </el-table-column>

    </template>

  </data-table>


</template>


<script>
import { nextReviewPaper } from '@/api/exam/review'

export default {
  data() {
    return {

      loading: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/exam/review/match/paging'
      }
    }
  },
  created() {
    this.listQuery.params.examId = this.$route.query.examId
  },

  methods: {
    toDetail(paperId) {
      this.$router.push({ name: 'ReviewPaperDetail', query: { examId: this.listQuery.params.examId, paperId: paperId }})
    },

    toFlow() {
      this.loading = true
      nextReviewPaper({ examId: this.listQuery.params.examId }).then(res => {
        const data = res.data
        this.loading = false
        if (!data.id) {
          this.$message.info('所有试卷都批阅完啦！')
          setTimeout(this.backToList, 1500)
        } else {
          this.toDetail(data.id)
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
